<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="/layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

</head>
<body>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><!--lay-event,layui的事件-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">

    <div class="demoTable">
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" placeholder="请输入新闻编号或标题/名称" autocomplete="off">
        </div>
        <button class="layui-btn" id="btnserach" lay-event="reload">搜索</button>
        <button class="layui-btn layui-btn-xm" lay-event="add">添加</button>
    </div>
</script>
<div id="updatediv" style="display:none">
    <form class="layui-form" action="" lay-filter="formTest"><!-- lay-filte相当于layui的id，唯一标识 -->
        <div class="layui-form-item">
            <label class="layui-form-label">新闻编号</label>
            <div class="layui-input-block">
                <input type="text" name="xinwen_id" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新闻标题</label>
            <div class="layui-input-block">
                <input type="text" name="xinwen_bt" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新闻内容</label>
            <div class="layui-input-block">
                <input type="text" name="xinwen_nr" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>

    </form>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>


<script>

    layui.use(['table','form'], function(){//layui.use()使用layui的功能，开始的layui代表layui的最大节点
        var table = layui.table;//定义一个table，是layui的table
        var $=layui.$;
        var form = layui.form;

        var depttab = table.render({//render渲染
            elem: '#test',//元素，#test指这个表格
            type: 'get'
            ,url:'../car/show'//后台的外网地址
            ,toolbar: '#toolbarDemo'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[//列,不设置宽度为自适应
                {field:'xinwen_id', title: '编号', sort: true}//field标题
                ,{field:'xinwen_bt', title: '新闻标题'}
                ,{field:'xinwen_nr', title: '新闻内容', sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}//#barDemo和上方编辑处的id对应
            ]]
            ,page:true//分页
        });

        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){

                    $.ajax({
                        url:"../car/delect/"+data.deptno,
                        type:"delete",
                        success:function(d){
                            if(d === 1){
                                layer.msg('删除已成功！！！', {
                                    icon: 1,
                                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    //更新表格
                                    depttab.reload();
                                });
                            }
                        }
                    });

                });
            }else if(obj.event === 'edit'){
                var uplayer = layer.open({
                    type: 1,
                    anim:1,
                    content: $('#updatediv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
                //给表单赋值
                form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "xinwen_id": data.xinwen_id // "name": "value"
                    ,"xinwen_bt": data.xinwen_bt
                    ,"xinwen_nr": data.xinwen_nr
                });
                //提交form表单
                form.on('submit(formDemo)', function(data){
                    layer.close(uplayer);
                    $.ajax({
                        url:"../car/update"
                        ,type:"post"
                        ,data:data.field
                        ,success:function(d){
                            if(d === 1){
                                layer.msg('修改已成功！！！', {
                                    icon: 1,
                                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    //更新表格

                                    depttab.reload();
                                });
                            }
                        }
                    });
                    return false;
                });
            }

        });
    });
</script>

</body>
</html>